<html ng-app="app">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="resources/weui/style/weui.min.css">
    <script src="resources/jquery.min.js"></script>
    <script src="resources/bootstrap/js/bootstrap.min.js"></script>
    <script src="resources/angular/angular.min.js"></script>
    <script src="resources/angular/angular-animate.min.js"></script>
    <script src="resources/angular/angular-sanitize.min.js"></script>
    <title>活动投票</title>
</head>
<body ng-controller="myCtrl" style="background-color: #eee;">
<h1 class="text-center survey_title"><b>活动满意度调查</b></h1>
<div class="page">
    <div class="page__bd">
        <div ng-repeat="question in vote.questions">

            <div class="weui-cells__title" ng-bind="'问题'+($index+1)+':'+question.title"></div>
            <div class="weui-cells weui-cells_radio" ng-if="question.type=='radio'">
                <label class="weui-cell weui-check__label" ng-repeat="option in question.options"
                       for="{{'x'+$parent.$index+$index}}">
                    <div class="weui-cell__bd">
                        <p ng-bind="option.title"></p>
                        <input class="weui-input" type="text" ng-show="option.isInput=='is'"
                               ng-model="option.description" placeholder="需要填写原因，20个字以上">
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="{{'radio'+$parent.$index}}" ng-value="option.id"
                               ng-model="question.select"
                               id="{{'x'+$parent.$index+$index}}">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>
            <div class="weui-cells weui-cells_checkbox" ng-if="question.type=='checkbox'">
                <label class="weui-cell weui-check__label" ng-repeat="option in question.options"
                       for="{{'s'+$parent.$index+$index}}">
                    <div class="weui-cell__hd">
                        <input type="checkbox" class="weui-check" name="{{'checkbox'+$parent.$index}}"
                               ng-model="option.select"
                               id="{{'s'+$parent.$index+$index}}">
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="weui-cell__bd">
                        <p ng-bind="option.title"></p>
                        <input class="weui-input" type="text" ng-show="option.isInput=='is'"
                               ng-model="option.description" placeholder="需要填写原因，20个字以上">
                    </div>
                </label>
            </div>
        </div>

    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips" ng-click="submit()">提交</a>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="background-color: #ca3535;
    margin-top: 30%;">
            <div class="hongbao">
                <div class="up text-center">您获得一次抽奖机会，祝您好运！嘿嘿嘿！</div>
                <div class="down"></div>
                <div class="kai text-center" ng-click="exchange()"><b>開</b></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var $tooltips = $('.js_tooltips');
        $('#showTooltips').on('click', function () {
            if ($tooltips.css('display') != 'none') return;
            // toptips的fixed, 如果有`animation`, `position: fixed`不生效
            $('.page.cell').removeClass('slideIn');
            $tooltips.css('display', 'block');
            setTimeout(function () {
                $tooltips.css('display', 'none');
            }, 2000);
        });
    });
</script>
<script>
    function getContextPath() {
        var pathName = document.location.pathname;
        var index = pathName.substr(1).indexOf("/");
        var result = pathName.substr(0, index + 1);
        return result;
    }
    var ctx = getContextPath();
    var app = angular.module('app', []);
    app.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.vote = {};
        $scope.onInit = function () {
            $http.get(ctx + '/vote/surveyParam').then(function (resp) {
                $scope.vote = resp.data.vote;
            });
        }
        $scope.onInit();
        $scope.submit = function () {
            for (var i = 0; i < $scope.vote.questions.length; i++) {
                var question = $scope.vote.questions[i];
                var flag = false;
                for (var j = 0; j < question.options.length; j++) {
                    var option = question.options[j];
                    if (question.type == 'radio' && question.select && question.select == option.id) {
                        flag = true;
                    } else if (question.type == 'checkbox' && option.select) {
                        flag = true;
                    }
                    if (option.isInput == 'is' &&
                        ((question.type == 'radio' && question.select && question.select == option.id) ||
                            question.type == 'checkbox' && option.select
                        ) &&
                        (!option.description || option.description.length < 20)) {
                        alert('备注为必填项，且在20字以上');
                        return;
                    }
                }
                if (!flag) {
                    alert('请选择答案');
                    return;
                }
            }
            $http.post(ctx + '/vote/vote', $scope.vote).then(function (resp) {
                $('.modal').modal({
                    backdrop: 'static'
                });
            });
        }
        $scope.exchange = function () {
            window.location.href = ctx + '/result';
        }
    }]);
</script>
</body>
</html>